<div class="row">
    <!-- Column -->
    <div class="col-lg-3 col-md-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex flex-row">
                    <div class="round round-lg align-self-center round-info"><i class="ti-wallet"></i></div>
                    <div class="m-l-10 align-self-center">
                        <h3 class="m-b-0 font-light">$3249</h3>
                        <h5 class="text-muted m-b-0">Total Revenue</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Column -->
    <!-- Column -->
    <div class="col-lg-3 col-md-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex flex-row">
                    <div class="round round-lg align-self-center round-warning"><i
                            class="zmdi zmdi-money zmdi-hc-fw"></i></div>
                    <div class="m-l-10 align-self-center">
                        <h3 class="m-b-0 font-lgiht">$2376</h3>
                        <h5 class="text-muted m-b-0">Online Revenue</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Column -->
    <!-- Column -->
    <div class="col-lg-3 col-md-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex flex-row">
                    <div class="round round-lg align-self-center round-primary"><i
                            class="zmdi zmdi-balance zmdi-hc-fw"></i></div>
                    <div class="m-l-10 align-self-center">
                        <h3 class="m-b-0 font-lgiht">$1795</h3>
                        <h5 class="text-muted m-b-0">Offline Revenue</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Column -->
    <!-- Column -->
    <div class="col-lg-3 col-md-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex flex-row">
                    <div class="round round-lg align-self-center round-danger"><i
                            class="zmdi zmdi-chart zmdi-hc-fw"></i></div>
                    <div class="m-l-10 align-self-center">
                        <h3 class="m-b-0 font-lgiht">$687</h3>
                        <h5 class="text-muted m-b-0">Ad. Expense</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Column -->
</div>

THIS IS MY DASHBOARD

<div>
    <button type="button" class="btn btn-info" (click)="selectImage()">Select Image</button>
    {{url}}
</div>

<div style="height: 50px;"></div>

<!-- <op-horizontal-timeline [data]="timeList"></op-horizontal-timeline> -->

<div #dynamicDiv class="my-class" [style.fontSize.px]="fontSize">
    这是一段比较长的文字
</div>

<div class="my-class" opTextAutoSizeNoWrapDirective containerHeight="22" fontSize="13">
    这是一段比较长的文字2
</div>